<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/web/commons/global.jsp"%>

<div class="time-item time-item-dyc-add"
	id="-dialog-time-item-${dialogComment.id }">
	<div class="text">
		${dialogComment.showShortDate }<br /> ${dialogComment.showShortTime }
	</div>
</div>

<div class="dialog-item"
	data-time="-dialog-time-item-${dialogComment.id }">
	<div class="user-img-div">
		<img src="${dialogComment.user.portraitUrl }" />
	</div>
	<div class="content">
		<span class="user-name">${dialogComment.user.nickname }</span>:
		<c:if test="${not empty dialogComment.comment.user.nickname}">
			<span class="to-user-name">
				@${dialogComment.comment.user.nickname
							}</span>
		</c:if>
		<span class="text"> ${dialogComment.content } </span>
	</div>
	<div class="clear-both"></div>
	<div class="comment-bars">
		<div class="bars">
			<ul class="ul-li-horizontal">
				<li class="bar like-bar -like-bar-dyc-${dialogComment.id }"><a
					href="javascript:;"> <input type="text"
						value="4,${dialogComment.id },1" class="value-store"
						style="display: none;" /> <c:choose>
							<c:when test="${dialogComment.praise }">
								<i class="icon-thumbs-up"></i>
							</c:when>
							<c:otherwise>
								<i class="icon-thumbs-up undertone"></i>
							</c:otherwise>
						</c:choose> <span><c:if
								test="${dialogComment.statistics.countPraise > 0}">${dialogComment.statistics.showCountPraise }</c:if></span>
				</a></li>
				<li class="vertical-split-line-1"></li>
				<c:choose>
					<c:when test="${userContext.userId == dialogComment.user.id }">
						<li class="bar delete-bar -delete-bar-dyc-${dialogComment.id }"><input
							type="text" value="${dialogComment.id }" class="value-store"
							style="display: none;" /> <a href="javascript:;">删除</a> <br />
							<i class="icon-caret-up hid"></i></li>
					</c:when>
					<c:otherwise>
						<li class="bar reply-bar -reply-bar-dyc-${dialogComment.id  }"><a
							href="javascript:;">回复</a> <br /> <i class="icon-caret-up hid"></i></li>
					</c:otherwise>
				</c:choose>
				<c:if test="${userContext.userId !=  dialogComment.user.id}">
					<li class="vertical-split-line-1"></li>
					<li class="bar report-bar"><a href="javascript:;"
						onclick="showExpose(4,${dialogComment.id })">举报</a></li>
				</c:if>
				<div class="clear-both"></div>
			</ul>
			<div class="clear-both"></div>
		</div>
		<div class="clear-both"></div>
	</div>
	<div class="clear-both"></div>
	<div class="reply hid">
		<div class="form-group">
			<textarea class="form-control textarea-auto-height clear-radius"
				rows="1">回复@${dialogComment.user.nickname }:</textarea>
		</div>
		<div class="reply-btn-div -reply-btn-div-dyc-${dialogComment.id }">
			<input class="value-store" value="4,${dialogComment.id }" /> <a
				href="javascript:;" class="btn btn-default btn-sm clear-radius">评&nbsp;论</a>
		</div>
		<div class="clear-both"></div>
		<div class="vertical-spacing-10"></div>
	</div>
	<div class="clear-both"></div>
</div>
<div class="spit-hr-1"></div>


<script type="text/javascript">
	//使用 textarea-auto-height 属性的textarea 会自动增高
	$('.textarea-auto-height').bind('input propertychange', function() {
		this.style.height = this.scrollHeight + 'px';
	});

	//删除点击事件
	$(
			'.show-dialog-module-wrapper .show-dialog-wrapper .dialog-items-wrapper .dialog-items .dialog-item .comment-bars .bars ul .-delete-bar-dyc-${dialogComment.id }')
			.click(function() {
				var _this = $(this);
				var _this_item = _this.closest('.dialog-item');

				var vals = _this.find('.value-store').val().split(',');
				var data = {
					id : vals[0]
				};

				deleteComment(data, _this_item);
			});

	$(function() {
		//回复点击事件
		$(
				'.show-dialog-module-wrapper .show-dialog-wrapper .dialog-items-wrapper .dialog-items .dialog-item .comment-bars .bars ul .-reply-bar-dyc-${dialogComment.id  }')
				.click(
						function() {
							var _this = $(this);
							var _this_i = _this.find('i');
							var _this_reply = _this.closest('.dialog-item')
									.find('.reply');
							if (_this_i.is(':hidden')) {
								_this_i.show();
								_this_reply.show();
							} else {
								_this_i.hide();
								_this_reply.hide();
							}
							_RESET_SHOW_DIALOG_MODULE_WRAPPER_FUN_();
						});

		//监控输入框的高度变化
		$(
				'.show-dialog-module-wrapper .show-dialog-wrapper .dialog-items-wrapper .dialog-items .dialog-item .reply .textarea-auto-height')
				.bind('input propertychange', function() {
					_RESET_SHOW_DIALOG_MODULE_WRAPPER_FUN_();
				});

		//点赞点击事件
		$(
				'.show-dialog-module-wrapper .show-dialog-wrapper .dialog-items-wrapper .dialog-items .dialog-item .comment-bars .bars ul .-like-bar-dyc-${dialogComment.id }')
				.click(
						function() {
							var _this = $(this);

							var attitudeVals = _this.find('.value-store').val()
									.split(',');
							var data = {
								itemType : attitudeVals[0],
								itemId : attitudeVals[1],
								type : attitudeVals[2]
							};

							var _this_i = _this.find('i');
							var _this_span = _this.find('span');
							if (_this_i.hasClass('undertone')) {
								dealAttitude(data, "add", _this_i, _this_span);
							} else {
								dealAttitude(data, "cancle", _this_i,
										_this_span);
							}
						});

		//监控回复的评论事件
		$(
				'.show-dialog-module-wrapper .show-dialog-wrapper .dialog-items-wrapper .dialog-items .dialog-item .reply .-reply-btn-div-dyc-${dialogComment.id }')
				.click(
						function() {
							var _this = $(this);
							var _items = $('.show-dialog-module-wrapper .show-dialog-wrapper .dialog-items-wrapper .dialog-items');

							String
							content = $.trim(_this.closest('.reply').find(
									'.form-group textarea').val());

							var datsStrs = _this.find('.value-store').val()
									.split(',');
							var data = {
								itemType : datsStrs[0],
								itemId : datsStrs[1],
								content : content
							};
							addComment(data, _items, 'dialog');
						});

	});
</script>